<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }


        /*搜索按钮*/

        .search_box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0.45rem 0.75rem;
            background-color: #fff;
            padding: 0.4rem 0;
            border-radius: 0.1rem;
        }

        .search_box img {
            width: 0.625rem;
            margin-right: 0.25rem;
        }

        .search_box span {
            font-size: 0.7rem;
            color: #999;
        }



        /*列表样式*/
        .city_list{
          padding: 0.9rem 0.75rem;
          background-color: #fff;
          line-height: 1.5;
          position: relative;
        }

        .city_list::after{
          content: "";
          height: 1px;
          width: calc(100% - 0.75rem);
          position: absolute;
          bottom: 0;
          right: 0;
          background: #e6e6e6;
        }
        .city_list .city_name{
          font-size: 0.7rem;
          color: #333;
        }
        .city_list .city_info{
          font-size: 0.5rem;
          color: #999;
        }
        label{
          width: 100%;
        }
        .no_show_address{
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .no_show_address .title{
          font-size: 0.7rem;
          color: #247ed7;
        }

        .check_btn {
            margin-left: 0.75rem;
            width: 0.75rem;
            height: 0.75rem;
            vertical-align: middle;
        }

        .check_btn:checked {
            background-color: #ff0036;
            border: 1px solid #ff0036;
        }

        .check_btn:checked::after,
        .check_btn:checked::before {
            width: 0.4rem;
            height: 0.2rem;
            margin-left: -0.25rem;
            margin-top: -0.2rem;
        }
    </style>
</head>

<body>



  <div class="location_list">
      <div class="search_box">
          <img src="../../image/four/search.png" alt="">
          <span>搜索</span>
      </div>


      <ul class="city_list_box" v-cloak>
        <li class="city_list" @click="send_address('地球的某个角落')">
          <label>
            <div class="no_show_address">
                <div class="title">不显示地址</div>
                <div class="input_box">
                  <input class="aui-radio check_btn" type="checkbox" name="checkbox">
                </div>
            </div>
        </label>
        </li>
        <li class="city_list" @click="send_address(main_address)">
            <div class="city_name"><span style="color:red;"  >推荐：</span>{{main_address}}</div>
            <div class="city_info">{{main_province}}{{main_city}}</div>
        </li>
        <li v-for="address_info in address_data" class="city_list" @click="send_address(address_info.name)">
            <div class="city_name">{{address_info.name}}</div>
            <div class="city_info">{{address_info.address}}</div>
        </li>
      </ul>
  </div>


</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {

        // 获取当前的位置信息
        var bMap = api.require('bMap');
        bMap.getNameFromCoords({
            lon: api.pageParam.lon,
            lat: api.pageParam.lat
        }, function(ret, err) {
            if (ret.status) {
                // console.log("获取到的位置信息---"+JSON.stringify(ret));

                //定义vue列表 渲染地址数据
                var address_list = new Vue({
                    el:".city_list_box",
                    data:{
                      address_data:[],
                      main_address:"推荐地址",
                      main_province:'',
                      main_city:''

                    },
                    mounted:function(){
                      var $_this = this;
                      $_this.main_address = ret.address;
                      $_this.main_province = ret.province;
                      $_this.main_city = ret.city;
                      $_this.address_data = ret.poiList;
                    },
                    methods:{
                      send_address:function(address){
                          api.sendEvent({
                              name: 'send_address',
                              extra: {
                                  address: address,
                              }
                          });

                          api.closeWin({});
                      }
                    }
                })

            }
        });

    };
</script>

</html>
